// 基础请求地址
axios.get("/api/curriculum/list")
    .then(({data: getData}) => {
        console.log(getData);
        //解构data
        const {data} = getData;
        if (data.length > 0) {
            //初始化渲染
            render(data)

            const inputElement = document.querySelector('#searchForm [type=search]');
            const tabList = document.querySelector('#frist_mod [role="tablist"]');
            //监听值，只要input框里面的值发生变化就执行
            tabList.addEventListener('click', function (e) {
                //课程推荐
                if (e.target.tagName === 'A' && e.target.dataset.name === "home") {
                    render(data)
                }
                //最新课程
                if (e.target.tagName === 'A' && e.target.dataset.name === "newClass") {
                    //进行一次深拷贝否则会影响原来的数组对象
                    const newData = JSON.parse(JSON.stringify(data))
                    //渲染深拷贝后的新数据
                    render(
                        //冒泡排序,通过对比时间进行排序
                        newData.sort(function (a, b) {
                            let dateA = new Date(a.startTeachingTime);
                            let dateB = new Date(b.startTeachingTime);
                            return dateB - dateA;
                        }))
                }
                //前端
                if (e.target.tagName === 'A' && e.target.dataset.name === "front") {
                    render(data.filter(item => item.name.toUpperCase().indexOf(e.target.innerHTML) > -1))
                }
                //后端
                if (e.target.tagName === 'A' && e.target.dataset.name === "back") {
                    render(data.filter(item => item.name.toUpperCase().indexOf(e.target.innerHTML) > -1))
                }
            })
            // 阻止默认回车事件
            inputElement.addEventListener('keydown', function (e) {
                if (e.key === 'Enter') {
                    e.preventDefault()
                }
            })
            //监听输入的数据，并进行筛选
            inputElement.addEventListener('input', debounce(function () {
                //获取输入的值，并改为大写以方便后面的匹配
                const input = inputElement.value.toUpperCase();
                //筛选渲染数据
                render(data.filter(item => item.name.toUpperCase().indexOf(input) > -1))
            }));

        }

    })
    .catch(function (error) {
        if (error.response) {
            // 请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围
            console.log('// 请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围')
            console.log(error.response.data);
            console.log(error.response.status);
            console.log(error.response.headers);
        } else if (error.request) {
            // 请求已经成功发起，但没有收到响应
            // `error.request` 在浏览器中是 XMLHttpRequest 的实例，
            console.log('请求已经成功发起，但没有收到响应', error.request);
        } else {
            // 发送请求时出了点问题
            console.log('Error发送请求时出了点问题', error.message);
        }
        console.log(error.config);
    });



//渲染数据
function render(obj) {
    console.log(obj);
    let str = ''
    document.querySelector('#frist_mod .row').innerHTML = `<div class="loader"></div> `
    setTimeout(function () {
        obj.forEach((item) => {
            console.log(item)
            //防止没有图片
            if (item.iconPath === '') {
                console.log('imgnot');
                item.iconPath = "./img/imgError.png";
            }
            //防止路径不全
            else if (item.iconPath.indexOf('http') === -1 && item.iconPath.indexOf('./img') === -1) {
                item.iconPath = "https://codelover.club" + item.iconPath;
                // console.log(item.iconPath)
            }
            let startime = Conversiontime(item.startTeachingTime);
            let stoptime = Conversiontime(item.finishTeachingTime);

            str += `
            <div class="col-xl-3 col-lg-4 col-md-6 mt-4 d-flex">
            <div class="card m-auto" style="width: 18rem;">
                <img src="${item.iconPath}" class="card-img-top image " alt="图片丢失">
                <div class="card-body d-flex flex-column">
                    <h5 class="card-title text-nowrap text-ellipsis ">${item.name}</h5>
                     <h6 class="card-subtitle mb-2 text-nowrap text-ellipsis text-muted">教师：${item.tutorNameList}</h6>
                     <p class="card-text">课程时间：${startime} - ${stoptime} </p>
                     <a target="_blank" href="course.html?currNo=${item.currNo}" class="btn btn-primary mt-auto">查看课程</a>
                </div>
            </div>
            </div>
            `
            document.querySelector('#frist_mod .row').innerHTML = str
        })
        if (!obj.length) {
            console.log(obj)
            document.querySelector('#frist_mod .row').innerHTML = `没有找到相应资源`

        }
    }, 200)
    //当没有数据时

}